<!--
 * @Author: GKN
 * @Date: 2024-01-10 22:21:21
 * @LastEditTime: 2024-01-11 11:13:26
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\login\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="loginView flex-d flex-align flex-j-c po-re">
    <mySpin v-if="loading" type="dot-collision" />
        <div class="logo">
            <img src="@/assets/img/logo1.png" alt="">
        </div>
        <div class="co">
            <div class="flex flex-j-s" style="padding:0 78px;">
                <div style="width: 100%;">
                    <el-form :model="form" label-width="0" size="large">
                        <el-form-item label="" class="flex">
                            <div style="font-size:18px;font-weight:bold;" class="p-r">手机号</div>
                            <div style="width: 70%">
                                <el-input v-model="form.mobile" placeholder="请输入手机号" style="height: 40px;"/>
                            </div>
                            
                        </el-form-item>
                        <el-form-item label="" style="margin-top:40px;">
                            <div style="font-size:18px;font-weight:bold;" class="p-r">验证码</div>
                            <div style="width: 70%;">
                                <el-input v-model="form.code" placeholder="请输入验证码" style="height: 40px;">
                                    <template #append>
                                        <div class="cursor-p" @click="send" style="color: #d10b00;">
                                            {{ str }}
                                        </div>
                                    </template>
                                </el-input>
                            </div>
                            
                        </el-form-item>
                    </el-form>
                    <div class="flex flex-j-s">
                        <div class="login-tip" style="padding-left:70px;"></div>
                        <div class="login-tip">
                            还不是会员？<span class="cursor-p" @click="editType">立即注册</span>
                        </div>
                    </div>
                </div>
                <!-- <div class="flex flex-align" style="width: 20%;">
                    <div class="flex-d flex-align flex-j-c">
                        <div class="ad-view" style="width: 120px;height: 120px;">
                            <img src="" alt="" class="ad-img">
                        </div>
                        <div style="margin-top:23px;">微信扫描二维码登录</div>
                    </div>
                </div> -->
            </div>
            
            <div class="flex flex-j-c">
                <div class="btn cursor-p hvr-float-shadow" @click="login">登录</div>
            </div>
            <div class="flex flex-j-s" style="padding-top:20px;">
                <p style="color:rgba(51, 51, 51, 1);font-size:16px;padding:0 78px;">您登录即同意《版权声明》《隐私声明》</p>
                <p></p>
            </div>
        </div>
  </div>
</template>

<script setup>
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import { useRouter } from "vue-router";
    const Router = useRouter();
    import { useStore } from 'vuex';
const store = new useStore();
    const form = ref({
        code:'',
        mobile:''
    })
    const loading = ref(false)
    const str = ref('发送验证码')
    const send = ()=>{
        if(str.value != '发送验证码'){
            return;
        }
        proxy.$http.request(proxy.$api.send_msg,'post',{
            "mobile": form.value.mobile
        },true, function (res) {
                if(res&&res.data){
                    proxy.$comJs.msg('success','发送验证码成功',2)
                    str.value = 60
                    setInterval(() => {
                        if(str.value > 0){
                            str.value = str.value-1
                        }else{
                            str.value = '发送验证码'
                        }
                    }, 1000);
                }
            }
        )
    }
    const login = ()=>{
        if(!form.value.mobile||!form.value.code){
            proxy.$comJs.msg('error','请填写手机号/验证码信息',2)
            return;
        }
        loading.value = true
        proxy.$http.request(proxy.$api.login,'post',{
            "mobile": form.value.mobile,
            "code":form.value.code,
        },true, function (res) {
                console.log(res)
                if(res&&res.data){
                    if(res.data.code== 0){
                        const jsonstr = {
                            'authorization' : res.headers.authorization,
                            'xUserid': res.headers['x-userid'],
                            'xSessionid':res.headers['x-sessionid']
                        }
                        localStorage.setItem( 'loginData', JSON.stringify(jsonstr));
                        localStorage.setItem( 'tabsStatus', 0 )
                        store.state.headerIndex = 0
                        proxy.$comJs.getUserInfo()
                        setTimeout(()=>{
                            loading.value = false
                            Router.push('/')
                        },600)
                        
                    }else{
                        loading.value = false
                    }
                }else{
                    loading.value = false
                }
            },
            function(res){
                loading.value = false
            }
        )
    }
    const loginType = ref(1)
    const editType=()=>{
        Router.push('/register');
    }
</script>

<style lang='less' scoped>
.loginView{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: url(@/assets/img/login/b.jpg);
    background-size:100% 100% ;
    top: 0;
    left: 0;
}
.btn{
    width: 238px;
    height: 54px;
    font-size: 20px;
    color: #fff;
    line-height: 54px;
    background: #d10b00;
    border-radius: 30px;
    margin-top: 30px;
    text-align: center;
}
.login-tip{
    font-size: 14px;
    span{
        color: #d10b00;
    }
}
.logo{
    width: 292px;
    height: 164px;
    img{
        width: 292px;
        height: 164px;
    }
}
.co{
    width: 760px;
    background: url(~@/assets/img/login/back.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 40px;
    padding-top: 120px;
    border-radius: 15px;

}

@media screen and (min-width: 1700px) {
/* 在屏幕大于**像素时应用这些样式 */
.logo{
    width: 292px;
    height: 164px;
    img{
        width: 292px;
        height: 164px;
    }
}
}
/* 在屏幕小于**像素时应用这些样式 */
@media screen and (max-width: 1700px) {
    .logo{
        width: 180px;
        height: 120px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
@media screen and (max-width: 1500px) {
    .logo{
        width: 160px;
        height: 92px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
</style>

